<!--
 * @Descripttion: 
 * @version: 
 * @Author: hutao
 * @Date: 2023-05-10 10:29:56
 * @LastEditors: hutao
 * @LastEditTime: 2023-05-26 17:46:55
-->
<template>
  <div>
    <span @click="handelVisible()"><slot>关闭</slot></span>
    <ht-model
      v-model="state.visible"
      :title="title"
      :okText="btnText"
      :loading="loading"
      @onOk="submit()"
    >
      <p style="font-size:14px;margin:0;color:#323433">
        {{ desc }}
      </p>
      <el-form
        ref="baseForm"
        label-width="100px"
        :label-position="'top'"
        style="margin-top: 0"
        :model="state.formData"
        class="ht-search-form "
      >
        <el-row class="ht-form-row">
          <el-form-item
            :label="label"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'change',
            }"
            prop="des"
          >
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 6 }"
              v-model="state.formData.des"
              placeholder="请输入"
            ></el-input> -->
            <el-autocomplete
              style="width:100%"
              class="inline-input"
              v-model="state.formData.des"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
            ></el-autocomplete>
          </el-form-item>
        </el-row>
      </el-form>
    </ht-model>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
interface State {
  /** 数据状态 */
  loading: boolean;
  visible: boolean;
  formData: {
    des?: string;
  };
}
@Component
export default class Index extends Vue {
  @Prop({ default: "关闭" }) title!: string;
  @Prop() desc!: string;
  @Prop() value!: string;
  @Prop() loading!: boolean;
  /** 表单的输入框名称 */
  @Prop({ default: "关闭原因" }) label!: string;
  /** 提交按钮的文字 */
  @Prop({ default: "确定" }) btnText!: string;
  /** 数据 */
  state: State = {
    loading: false,
    visible: false,
    formData: {
      des: undefined,
    },
  };
  /** 生命周期 */
  handelVisible(visible = true) {
    this.state.visible = visible;
  }
  querySearch(queryString: string, cb: any) {
    const tips = [{ value: "暂时不需要了" }];
    const results = queryString
      ? tips.filter(this.createFilter(queryString))
      : tips;
    // 调用 callback 返回建议列表的数据
    cb(results);
  }
  createFilter(queryString: string) {
    return (tip: any) => {
      return tip.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
    };
  }
  /** 方法 */
  submit() {
    (this.$refs["baseForm"] as any).validate((valid: boolean) => {
      if (valid) {
        this.$emit("callback", this.state.formData.des);
      } else {
        // this.$notify.error('请完善基本信息');
      }
    });
  }
  /** 监听 */
  /** 计算属性 */
  @Watch("value", { immediate: true })
  initValue(val: string) {
    this.state.formData.des = val;
  }
}
</script>
<style lang="scss" scoped></style>
